<template>
	<div class="mainbody" v-resize="handleResize">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>统计报表</el-breadcrumb-item>
				<el-breadcrumb-item>消费统计</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		
		<div class="toolbar-box">
			<div class="list-box">
				<div class="r-list">
					<div class="search-box">
						<el-date-picker style="width:auto;" v-model="dateRange"
							type="datetimerange"
							value-format="yyyy-MM-dd HH:mm:ss"
							range-separator="至"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							@change="initLoad">
						</el-date-picker>
					</div>
				</div>
			</div>
		</div>
		
		<div class="content-box">
			<el-card v-loading="chartLoading" class="report-box">
				<div id="reportChart" class="chart-box"></div>
			</el-card>
			<el-card class="table-card mat-20">
				<el-table ref="multipleTable" v-loading="loading" :data="listData" stripe class="table-list">
					<el-table-column prop="userId" label="用户ID" width="80"></el-table-column>
					<el-table-column prop="remark" label="备注" min-width="120"></el-table-column>
					<el-table-column prop="value" label="金额" width="100"></el-table-column>
					<el-table-column prop="addTime" label="记录时间" width="160"></el-table-column>
				</el-table>
			</el-card>
			
			<div class="pager-box">
				<el-pagination background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageIndex"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="totalCount">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	
	export default {
		data() {
			return {
				loading: false,
				chartLoading: false,
				dateRange: [],
				echartData: [],
				echartList: [],
				totalCount: 0,
				pageSize: 10,
				pageIndex: 1,
				listData: [],
			}
		},
		methods: {
			//初始化图表
			initChart() {
				//处理数据
				let title = [];
				let data = [];
				this.echartData.map(item => {
					title.push(item.title);
					data.push(item.amount);
				});
				//基于准备好的dom，初始化echarts实例
				let echart = echarts.init(document.getElementById('reportChart'));
				this.echartList.push(echart);//加入刷新队列
				//绘制图表
				echart.setOption({
					color: ['#3398DB'],
					title: { text: '会员消费统计', subtext: '默认显示当月统计数据', textStyle: { fontSize: 16, fontWeight: "normal" } },
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						left: '2%',
						right: '2%',
						bottom: '5%',
						width: 'auto',
						height: 'auto',
						containLabel: true
					},
					xAxis: {
						data: title
					},
					yAxis: {
						type: 'value',
						minInterval: 1
					},
					series: [{
						name: '消费金额',
						type: 'line',
						data: data
					}]
				});
			},
			//初始化图表数据
			initLoad() {
				let _this = this;
				let sendUrl = "/admin/report/member/amount/count";
				if (_this.dateRange && _this.dateRange.length > 0) {
					sendUrl += "?startTime=" + _this.dateRange[0];
					sendUrl += "&endTime=" + _this.dateRange[1];
				}
				//初始化统计数据
				_this.$api.request({
					url: sendUrl,
					beforeSend() {
						_this.chartLoading = true
					},
					success(res) {
						_this.echartData = res.data;
						_this.initChart();
					},
					error(err) {
						_this.echartData = []
					},
					complete() {
						_this.chartLoading = false
					}
				});
				//初始化列表
				_this.initData();
			},
			//初始化列表数据
			initData() {
				let _this = this;
				let sendUrl = "/admin/report/member/amount/list";
				if (_this.dateRange && _this.dateRange.length > 0) {
					sendUrl += "?startTime=" + _this.dateRange[0];
					sendUrl += "&endTime=" + _this.dateRange[1];
				}
				//初始化列表
				_this.$api.request({
					url: sendUrl,
					beforeSend() {
						_this.loading = true
					},
					success(res) {
						_this.listData = res.data;
						let pageInfo = JSON.parse(res.headers["x-pagination"]);
						_this.totalCount = pageInfo.totalCount;
						_this.pageSize = pageInfo.pageSize;
						_this.pageIndex = pageInfo.pageIndex;
					},
					error(err) {
						_this.totalCount = 0;
						_this.pageSize = 0;
						_this.pageIndex = 1;
						_this.listData = []
					},
					complete() {
						_this.loading = false
					}
				});
			},
			//每页显示数量
			handleSizeChange(val) {
				if (this.pageSize != val) {
					this.pageSize = val;
					this.initData();
				}
			},
			//跳转到第几页
			handleCurrentChange(val) {
				if (this.pageIndex != val) {
					this.pageIndex = val;
					this.initData();
				}
			},
			//页面发生改变时
			handleResize () {
				this.echartList.forEach((chart) => {
					chart.resize();
				});
			},
		},
		created() {
			this.initLoad();
		},
		//使用局部注册指令的方式
		directives: {
			resize: { // 指令的名称
				bind (el, binding) { //el为绑定的元素，binding为绑定给指令的对象
					let width = '', height = '';
					function isReize () {
						const style = document.defaultView.getComputedStyle(el);
						if (width !== style.width || height !== style.height) {
							binding.value();  //关键
						}
						width = style.width;
						height = style.height;
					}
					el.__vueSetInterval__ = setInterval(isReize, 300);
				},
				unbind (el) {
					clearInterval(el.__vueSetInterval__);
				}
			},
		},
	}
</script>